<template>
	<view class="swiper-item yb-flex yb-flex-1">
		<template v-if="params.type == 'broadcast'">
			<view class="yb-flex yb-flex-1 yb-justify-center">
				<view class="rd-live-player rd-live-broadcast yb-flex">
					<image class="rd-live-broadcast-bg" :src="params.cover" mode="aspectFit"></image>
					<view class="rd-live-broadcast-btn padding-gap yb-flex yb-flex-1 yb-row yb-align-center">
						<view class="line yb-flex-1" :style="{
							'background-color': skinColor.color_white
						}"></view>
						<yb-button @click="toggle" class="btn" :options="{
							bgColor: skinColor.color_white
						}" plain :value="ready ? paused ? '开始收听' : '正在收听' : '加载中'"></yb-button>
						<view class="line yb-flex-1" :style="{
							'background-color': skinColor.color_white
						}"></view>
					</view>
					<view class="rd-live-broadcast-title yb-flex yb-align-center">
						<yb-text :color="skinColor.color_white" :lines="1" :value="params.title" :size="33"></yb-text>
					</view>
					<view v-if="error" class="rd-live-broadcast-error yb-flex yb-row yb-justify-center yb-align-center">
						<yb-icon name="fork-circle" :color="skinColor.color_white" :size="30"></yb-icon>
						<yb-text :color="skinColor.color_white" value="加载失败" :size="30"></yb-text>
					</view>
				</view>
			</view>
			<yingbing-audio ref="live" :src="params.src || ''" @canplay="handleCanplay" @play="handlePlay" @pause="handlePause" @error="handleError"></yingbing-audio>
		</template>
		<template v-else>
			<video
			:controls="false"
			ref="live"
			class="yb-flex-1"
			:src="params.src"
			@play="handlePlay"></video>
			<images :style="{
				visibllity: visible ? 'visible' : 'hidden'
			}" class="cover" :src="params.cover" mode="aspectFit"></images>
		</template>
		<view class="mask"></view>
		<view class="bottom-info yb-flex padding-gap">
			<yb-text :lines="1" custom-style="margin-bottom: 10rpx" :size="30" :color="skinColor.color_white" :value="'@' + (params.creator || app.$business.filterSource(params.source).title)" />
			<view class="yb-flex yb-row yb-wrap">
				<yb-tap v-for="(tag, i) in params.tag" :key="i" stop @click="app.$business.showTaglist(tag, params.type)">
					<yb-tag :options="{
						bgColor: app.$utils.hex2rgba(skinColor.color_white, .8),
						color: 'rgba(0,0,0,.5)'
					}" custom-style="margin-right: 10rpx;margin-bottom: 10rpx" :value="tag"></yb-tag>
				</yb-tap>
			</view>
			<yb-text v-if="params.title" :lines="1" custom-style="margin-top: 10rpx" :size="30" :color="app.$utils.hex2rgba(skinColor.color_white, .8)" :value="params.title" />
		</view>
		<view class="detail yb-flex yb-align-center">
			<yb-button :options="{
				bgColor: skinColor.color_white,
				size: '22rpx',
				radius: '10rpx'
			}" @click="app.$business.openDetail(params)" custom-class="detail-btn" plain :value="'进入' + app.$business.getType(params.type) + '间'"></yb-button>
		</view>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		data () {
			return {
				params: {},
				isInit: true,
				ready: false,
				paused: true,
				error: false
			}
		},
		beforeDestroy() {
			this.stop()
		},
		created() {
			this.params = this.item
		},
		mounted() {
			this.$nextTick(function () {
				setTimeout(() => {
					if ( this.params.id ) this.getDetail(this.params)
				}, 500)
			})
		},
		methods: {
			toggle () {
				this.$refs.live && this.$refs.live.toggle()
			},
			play () {
				this.$refs.live && this.$refs.live.play()
			},
			pause () {
				this.$refs.live && this.$refs.live.pause()
			},
			stop () {
				this.$refs.live && this.$refs.live.stop()
			},
			handleCanplay () {
				this.ready = true
				if ( this.visible ) this.play()
			},
			handlePlay () {
				this.isInit = false
				this.paused = false
			},
			handlePause () {
				this.paused = true
			},
			handleError () {
				this.error = true
			},
			getDetail (params) {
				if ( params.src ) {
					if ( this.visible ) this.play()
				} else {
					this.app.$api.getSingleDetail(params).then(res => {
						if ( res.code == this.app.$config.ERR_OK ) {
							params = Object.assign({}, params, res.data.data)
						}
						if ( !params.shareUrl ) params.shareUrl = res.requestUrl
						let tag = getTag(params.type, params.title + '_' + params.creator + '_' + params.style + '_' + params.desc)
						params.tag = [...new Set(params.tag.concat(tag))]
						if ( params.src && this.visible ) {
							this.$nextTick(function () {
								this.play()
							})
						}
					})
				}
			}
		},
		watch: {
			visible (newVal) {
				if ( newVal ) {
					this.getDetail(this.params)
				} else {
					this.pause()
				}
			},
			item (newVal) {
				this.params = Object.assign({}, newVal, this.params)
				if ( this.params.id ) this.getDetail(this.params)
			}
		}
	}
</script>

<style>
	.swiper-item .cover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.2);
	}
	.top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.tab {
		font-size: 32rpx;
		border-bottom-width: 2px;
		border-bottom-style: solid;
		padding: 10rpx 0;
	}
	.bottom-info {
		position: absolute;
		bottom: 50rpx;
		left: 0;
		right: 200rpx;
	}
	.detail {
		position: absolute;
		bottom: 300rpx;
		left: 0;
		right: 0;
	}
	.detail-btn {
		height: 60rpx;
		width: 200rpx;
	}
	.rd-live-player {
		position: relative;
		height: 420rpx;
	}
	.rd-live-broadcast {
		background-image: linear-gradient(to right, #e96443, #904e95);
	},
	.rd-live-broadcast-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.3;
	}
	.rd-live-broadcast-btn .line {
		height: 1px;
	}
	.rd-live-broadcast-btn .btn {
		width: 280rpx;
		height: 80rpx;
		margin: 0 30rpx;
	}
	.rd-live-broadcast-error {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50rpx;
	}
	.rd-live-broadcast-title {
		position: absolute;
		left: 0;
		right: 0;
		top: 50rpx;
	}
</style>